<!DOCTYPE HTML>
<html>
  <head>
   	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="keywords" content="武大吉奥,数据可视化,GeoSmarter,GeoShow">
	<meta http-equiv="description" content="">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>武大吉奥GeoShow-地理国情综合统计</title>
    <!-- 基础预览页 -->

    
    <!-- 决定使用Android 的JS注入还是本地模拟JS -->
     <!-- 使用本地模拟js提供数据 -->
     <!-- 使用Android 注入 对象提供数据 -->
     <!--    <script type="text/javascript" src="data_query.js"></script> --> 
    <script type="text/javascript" src="js/local_data_query.js"></script>
    <script type="text/javascript" src="js/echarts.min.5.js"></script>

    <style type="text/css">
        
        * {
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
        }

        #line01{
            width:1000px;
            margin: 8px auto ;
            float: center;
            padding: 10px;
            align-content: center;

        }
        #line02{
            width:1000px;
            margin: 8px auto ;
            padding: 10px;
            float: center;
        }

        #piechart{
            width: 50%;
            height: 320px;
            padding: 10px;
            position: relative ;
            float:left;
        }

        #radarchart{
            width: 50%;
            height: 320px;
            padding: 10px;
            position: relative ;
            float:left;
        }

        #barchart{
            width: 50%;
            height: 320px;
            float:left;
            position: relative ;

            padding: 10px;
        }
        #linechart{
            width: 50%;
            height: 320px;
            float:left;
            position: relative ;
            padding: 10px;
        }

        h1 {text-align: center; font-size: 28px;}
        
      </style>

  </head>
    
    
  <body id="body" style="border:0px;padding:0px;">
    
    <h1>地理国情综合统计</h1>
      <div id="line01">
            <div id="piechart" ></div>
            <div id="radarchart" ></div>
      </div>
      <div id="line02">
          <div id="barchart" ></div>
          <div id="linechart" ></div>
      </div>
    
      <script type="text/javascript">
      
            var pieChart= echarts.init(document.getElementById("piechart"))
            var radarChart= echarts.init(document.getElementById("radarchart"))
            var barChart= echarts.init(document.getElementById("barchart"))
            var lineChart= echarts.init(document.getElementById("linechart"))
      
            var radarOption = {
                 title: {
                    text: ''
                    },
                    tooltip: {},
                    legend: {
                        data: [/*'预算分配', '实际开销'*/],
                        right:'right'
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: [
//                           { name: '销售（sales）', max: 6500},
//                           { name: '管理（Administration）', max: 16000},
//                           { name: '信息技术（Information Techology）', max: 30000},
//                           { name: '客服（Customer Support）', max: 38000},
//                           { name: '研发（Development）', max: 52000},
//                           { name: '市场（Marketing）', max: 25000}
                        ]
                    },
                    series: [{
                        name: '',
                        type: 'radar',
                        // areaStyle: {normal: {}},
                        data : [
//                            {
//                                value : [4300, 10000, 28000, 35000, 50000, 19000],
//                                name : '预算分配'
//                            },
//                             {
//                                value : [5000, 14000, 28000, 31000, 42000, 21000],
//                                name : '实际开销'
//                            }
                        ]
                    }]
            };
            
        var pieOption = {
            title : {
                text: '',
                subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: []/*['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']*/
                },
                series : [
                    {
                        name: '',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
//                            {value:335, name:'直接访问'},
//                            {value:310, name:'邮件营销'},
//                            {value:234, name:'联盟广告'},
//                            {value:135, name:'视频广告'},
//                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
        };
          
                  // -----------------注入数据 begin -------------
//        var pieChart = projectJson.content[0].widgets[0];
//        var radarChart = projectJson.content[0].widgets[1];
//           
        // 设置饼状图标题
        pieOption.title.text='全区统计';
//        // 设置饼状图图例
        pieOption.legend.data = getPieLegendData();
//        // 设置饼状图数据提示前方文字
//        pieOption.series[0].name='';
//        // 设置饼子数据
        pieOption.series[0].data = getPieSeriesData();
//        
//        // 设置雷达图标题
        radarOption.title.text='下属行政区统计';
//        // 设置雷达图图例
        radarOption.legend.data = getRadarLegendData();
//        // 设置雷达图数据集
        radarOption.series[0].data = getRadarSeriesData();
//        // 设置雷达图环形文字指标及最大值
        radarOption.radar.indicator =  getRadarPolar();      
        // ---------------注入数据  end ---------------
          
      pieChart.setOption(pieOption);
      radarChart.setOption(radarOption);
          
      barChart.setOption(getBarOption());
      lineChart.setOption(getLineOption());

      
      </script>
  
 
    
  </body>
</html>
